<template>
  <div>
    <el-row :gutter="10">

      <el-col :span="12">
        <el-card>
          <div style="width: 100%; height: 400px" id="bar"></div>
        </el-card>
      </el-col>


      <el-col :span="12">
        <el-card>
          <div style="width: 100%; height: 400px" id="pie"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import request from "@/utils/request";
export default {
  name: "ChartsView",
  data() {
    return {

    }
  },
  mounted() {  // 等待页面的元素全部加载完成之后再初始化
    this.initCharts();
    this.initChart()



  },
  methods: {
    initCharts() {
      request.get("/count/allCount").then(res => {
        if (res.code === '0') {
          console.log(res.data);
          this.initPie(res.data);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    initChart() {
      request.get("/count/allApplicationCount").then(res => {
        if (res.code === '0') {
          console.log(res.data);
          this.initPieB(res.data);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 饼图
    initPie(data) {
      let pieDom = document.getElementById('pie');
      let pieChart = echarts.init(pieDom);
      let option1;
      option1 = {
        title: {
          text: '宠物统计',
          subtext: '比例图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '宠物统计',
            type: 'pie',
            center: ['50%', '60%'],
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option1 && pieChart.setOption(option1);


    },
    initPieB(data) {
      let pieDom = document.getElementById('bar');
      let pieChart = echarts.init(pieDom);
      let option;
      option = {
        title: {
          text: '审核情况统计',
          subtext: '比例图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '审核统计',
            type: 'pie',
            center: ['50%', '60%'],
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && pieChart.setOption(option);


    }
  }
}
</script>

<style scoped>

</style>